<script setup lang="ts">
interface HeaderProps {
  canAutoBack?: boolean;
  showLeftClick?: boolean;
  showRight?: boolean;
  title?: string;
  rightText?: string;
  rightStyle?: any;
}

withDefaults(defineProps<HeaderProps>(), {
  canAutoBack: false,
  title: "",
  rightText: "跳过",
  rightStyle: "",
  showLeftClick: false,
  showRight: false
});

const handleOnBack = () => {
  uni.navigateBack({ delta: 1 });
};

const emit = defineEmits(["right-click"]);
</script>

<template>
  <view class="header-page">
    <view :class="showLeftClick ? '' : 'bar'">
      <uv-navbar
        :autoBack="canAutoBack"
        :fixed="false"
        :title="title"
        bg-color="transparent"
        left-icon-color="#fff"
        title-style="color: #fff"
        @leftClick="handleOnBack"
      >
        <template v-slot:left>
          <image
            v-if="showLeftClick"
            src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/back-left.png"
            mode="scaleToFill"
            class="back-icon"
          />
        </template>
        <template v-slot:right>
          <view
            v-if="showRight"
            :style="rightStyle"
            @click="emit('right-click')"
          >
            {{ rightText }}
          </view>
        </template>
      </uv-navbar>
    </view>
    <slot />
  </view>
</template>

<style lang="scss" scoped>
.header-page {
  width: 100vw;
  height: 100vh;
  background: #fff;
  box-sizing: border-box;
  padding-bottom: 10px;
  background-size: 100% auto;
  background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/login-bg.jpeg");
}

.bar {
  ::v-deep .uv-navbar__content__left {
    display: none;
  }
}

.back-icon {
  width: 24px;
  height: 24px;
}
</style>
